import React from 'react';
import { WebView, Animated, ActivityIndicator, Image, FlatList, ScrollView, StyleSheet, Text, View, TouchableOpacity, Modal, TextInput, TouchableWithoutFeedback, DeviceEventEmitter } from 'react-native';

import ScrollableTabView, { BadgedTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view'
import { AlertDialog, SimpleItemsBottom } from 'react-native-pickers'
import ImagePicker from 'react-native-image-picker'
import { AudioRecorder, AudioUtils } from 'react-native-audio'
import Sound from 'react-native-sound'

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import RouterUtils from '../Utils/RouterUtils'
import ToastUtils from '../Utils/ToastUtils'
import StorageUtils from '../Utils/StorageUtils'
import Constant from '../Constant/Constant'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'

const options = {
    title: '请选择',
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    quality: 0.75,
    allowsEditing: false,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images',
    },
}

export default class PageKssbList extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '快速处置',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            //tab1
            pageIndexNeed: 1,
            onRefreshingNeed: true,
            onLoadMoreNeed: false,
            loadMoreCountNeed: 0,
            dataSourceNeed: [],
            isNoDataNeed: false,
            //tab2
            pageIndexHistory: 1,
            onRefreshingHistory: false,
            onLoadMoreHistory: false,
            loadMoreCountHistory: 0,
            dataSourceHistory: [],
            isNoDataHistory: false,
            //page
            areaGradeDatas: [],
            areaName: '请选择',
            areaCode: '',
            caseGradeDatas: [],
            caseCategoryDatas: [],
            gradeName: '请选择',
            gradeCode: '',
            categoryName: '请选择',
            categoryCode: '',
            bigTypeName: '请选择',
            bigTypeCode: '',
            smallTypeName: '请选择',
            smallTypeCode: '',
            lawDesc: '请选择小类后查看',
            grid: '',
            geoLocation: '',
            geoAddress: '请选择',
            uploadPics: [],
            processPics: [],
            voiceName: '请录音(非必填)',
            voiceUrl: '',
            gtzfIds: '',
            collaborators: '请选择',
            questionDesc: '',
            hasPermission: undefined, //授权状态
            audioPath: AudioUtils.DocumentDirectoryPath + '/test.mp3', // 文件路径
            recording: false, //是否录音
            pause: false, //录音是否暂停
            stop: false, //录音是否停止
            currentTime: '0',
            voiceInputModal: false,
            longPressDelPicModal: false,
            longPressDelVoiceModal: false,
            longPressDelPicItem: {},
            longPressDelPicType: ''
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('PageKssbList', this.props.navigation.state.key);
        this.listener1 = DeviceEventEmitter.addListener('postLocation', (events) => this.postLocation(events));
        this.getCaseArea();//获取案件区域
        this.getCaseGrade();//获取案件登记
        this.getCaseCategory();//获取案件类型
        this.getNeedList();//获取未上报列表
        this.getHistoryList();//获取未上报列表
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('PageKssbList', this.props.navigation.state.key);
        this.listener1.remove();
    }

    onChangeTabs(obj)
    {
    }

    postLocation(event)
    {
        var data = JSON.parse(event);
        this.setState({
            geoAddress: data.address,
            geoLocation: data.geolocation.lng + ',' + data.geolocation.lat,
            grid: data.grid
        })
    }

    getHistoryList()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.kssbReportList + '?current=' + that.state.pageIndexHistory + '&size=20', session, function (resultcode, data)
                    {
                        if (that.state.pageIndexHistory == 1)
                        {
                            that.setState({
                                onRefreshingHistory: false,
                                onLoadMoreHistory: data.records.length > 0,
                                dataSourceHistory: data.records,
                                loadMoreCountHistory: data.records.length,
                                isNoDataHistory: data.records.length == 0
                            });
                        } else
                        {
                            that.setState({
                                onRefreshingHistory: false,
                                onLoadMoreHistory: data.records.length > 0,
                                dataSourceHistory: that.state.dataSourceHistory.concat(data.records),
                                loadMoreCountHistory: data.records.length,
                                isNoDataHistory: false
                            });
                        }
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    getNeedList()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.kssbUnReportList + '?current=' + that.state.pageIndexNeed + '&size=20', session, function (resultcode, data)
                    {
                        if (that.state.pageIndexNeed == 1)
                        {
                            that.setState({
                                onRefreshingNeed: false,
                                onLoadMoreNeed: data.records.length > 0,
                                dataSourceNeed: data.records,
                                loadMoreCountNeed: data.records.length,
                                isNoDataNeed: data.records.length == 0
                            });
                        } else
                        {
                            that.setState({
                                onRefreshingNeed: false,
                                onLoadMoreNeed: data.records.length > 0,
                                dataSourceNeed: that.state.dataSourceNeed.concat(data.records),
                                loadMoreCountNeed: data.records.length,
                                isNoDataNeed: false
                            });
                        }
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    getCaseArea()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.dictionary + '?code=area_category', session, function (resultcode, data)
                    {
                        that.setState({
                            areaGradeDatas: data
                        })
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    getCaseGrade()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.dictionary + '?code=case_grade', session, function (resultcode, data)
                    {
                        that.setState({
                            caseGradeDatas: data
                        })
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    getCaseCategory()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.selectCategory, session, function (resultcode, data)
                    {
                        that.setState({
                            caseCategoryDatas: data
                        })
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    jumpDetail(status, id, processInstanceId)
    {
        this.props.navigation.navigate('PageKsczDetail', {'title': '快速处置', 'status': status, 'id': id, 'processInstanceId': processInstanceId});
    }

    //区域类型
    showAreaGradeItem()
    {
        this.AreaGradeItemsDialog.show();
    }

    //案件级别
    showCaseGradeItem()
    {
        this.CaseGradeItemsDialog.show();
    }

    //案件类型
    showCategoryItem()
    {
        if (this.state.gradeName == '请选择')
        {
            ToastUtils.toastShortCenter('请先选择案件级别')
            return;
        }
        this.CaseCategoryItemsDialog.show();
    }

    jumpPageBigTypeSelect()
    {
        if (this.state.categoryName == '请选择')
        {
            ToastUtils.toastShortCenter('请先选择案件类型')
            return;
        }
        this.props.navigation.navigate('PageTypeBigSelect',
            {
                transition: 'forVertical',
                'categoryCode': this.state.categoryCode,
                callback: ((result) =>
                {
                    if (result.split('-')[0] != this.state.bigTypeName)
                    {
                        this.setState({
                            bigTypeName: result.split('-')[0],
                            bigTypeCode: result.split('-')[1],
                            smallTypeName: '请选择',
                            smallTypeCode: '',
                        })
                    }
                })
            })
    }

    jumpPageSmallTypeSelect()
    {
        if (this.state.bigTypeName == '请选择')
        {
            ToastUtils.toastShortCenter('请先选择案件大类');
            return;
        }
        this.props.navigation.navigate('PageTypeSmallSelect',
            {
                transition: 'forVertical',
                'categoryOneCode': this.state.bigTypeCode,
                callback: ((result) =>
                {
                    this.setState({
                        smallTypeName: result.split('-')[0],
                        smallTypeCode: result.split('-')[1],
                        lawDesc:'请查看'
                    })
                })
            })
    }

    jumpPageSmallLawSelect()
    {
        if (this.state.smallTypeName == '请选择')
        {
            ToastUtils.toastShortCenter('请先选择案件小类');
            return;
        }
        this.props.navigation.navigate('PageTypeLawSelect',
            {
                transition: 'forVertical',
                'categoryTwoCode': this.state.smallTypeCode
            })
    }

    jumpLocation()
    {
        this.props.navigation.navigate('WebPage', {'title': '当前位置', 'url': Constant.mapServer + '?type=dingwei'})
    }

    jumpCollaboratorsSelect()
    {
        this.props.navigation.navigate('PageAjzpSelect',
            {
                transition: 'forVertical',
                'title': '选择共同执法人',
                callback: ((info) =>
                {
                    this.setState({
                        gtzfIds: info.ids,
                        collaborators: info.names
                    })
                })
            })
    }

    jumpProcess()
    {
        if (this.state.processPics.length >= 3)
        {
            ToastUtils.toastShortCenter('最多上传三张照片')
            return;
        }
        ImagePicker.showImagePicker(options, (response) =>
        {
            if (response.didCancel)
            {
                console.log('User cancelled image picker');
            } else if (response.error)
            {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton)
            {
                console.log('User tapped custom button: ', response.customButton);
            } else
            {
                var that = this;
                HttpUtils.uploadPic(Constant.uploadProcessImg, response.uri, function (resultcode, data)
                {
                    ToastUtils.toastShortBottom('上传图片成功');
                    var imgUrl = {url: data.link.toString()};
                    that.state.processPics.push(imgUrl);
                    that.setState({
                        processPics: that.state.processPics
                    })
                }, function (resultcode, reason)
                {
                    ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                });
            }
        });
    }

    jumpPhoto()
    {
        if (this.state.uploadPics.length >= 3)
        {
            ToastUtils.toastShortCenter('最多上传三张照片')
            return;
        }
        ImagePicker.showImagePicker(options, (response) =>
        {
            if (response.didCancel)
            {
                console.log('User cancelled image picker');
            } else if (response.error)
            {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton)
            {
                console.log('User tapped custom button: ', response.customButton);
            } else
            {
                var that = this;
                HttpUtils.uploadPic(Constant.uploadReportImg, response.uri, function (resultcode, data)
                {
                    ToastUtils.toastShortBottom('上传图片成功');
                    var imgUrl = {url: data.link.toString()};
                    that.state.uploadPics.push(imgUrl);
                    that.setState({
                        uploadPics: that.state.uploadPics
                    })
                }, function (resultcode, reason)
                {
                    ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                });
            }
        });
    }

    /**
     * AudioRecorder.prepareRecordingAtPath(path,option)
     * 录制路径
     * path 路径
     * option 参数
     */
    prepareRecordingPath = (path) =>
    {
        const option = {
            SampleRate: 44100.0, //采样率
            Channels: 2, //通道
            AudioQuality: 'High', //音质
            AudioEncoding: 'aac', //音频编码
            OutputFormat: 'mp3', //输出格式
            MeteringEnabled: false, //是否计量
            MeasurementMode: false, //测量模式
            AudioEncodingBitRate: 32000, //音频编码比特率
            IncludeBase64: true, //是否是base64格式
            AudioSource: 0, //音频源
        }
        AudioRecorder.prepareRecordingAtPath(path, option)
    }

    jumpVoicePlay(playUrl)
    {
        if (!playUrl.endsWith('.mp3'))
        {
            ToastUtils.toastShortCenter('音频格式有误');
            return;
        }
        ToastUtils.toastShortCenter('录音开始播放')
        console.log('playUrl:' + playUrl)
        let whoosh = new Sound(playUrl, '', err =>
        {
            if (err)
            {
                return console.log(err)
            }
            whoosh.play(success =>
            {
                if (success)
                {
                    ToastUtils.toastShortCenter('录音播放结束')
                } else
                {
                    ToastUtils.toastShortCenter('录音播放失败')
                }
            })
        })
    }

    jumpVoiceRecord()
    {
        AudioRecorder.requestAuthorization()
            .then(isAuthor =>
            {
                console.log('是否授权: ' + isAuthor)
                if (!isAuthor)
                {
                    return ToastUtils.toastShortCenter('请前往设置开启录音权限')
                } else
                {
                    this.setState({
                        voiceInputModal: true
                    })
                }
                this.setState({hasPermission: isAuthor})
                console.log('录音路径: ' + this.state.audioPath)
                this.prepareRecordingPath(this.state.audioPath);
                // 录音进展
                AudioRecorder.onProgress = (data) =>
                {
                    this.setState({currentTime: Math.floor(data.currentTime)});
                };
                // 完成录音
                AudioRecorder.onFinished = (data) =>
                {
                    // data 返回需要上传到后台的录音数据
                    console.log(this.state.currentTime)
                    console.log(JSON.stringify(data))
                };
            })
    }

    startVoiceRecodeInput = async () =>
    {
        // 请求授权
        if (!this.state.hasPermission)
        {
            return ToastUtils.toastShortCenter('没有授权')
        }
        if (this.state.recording)
        {
            return ToastUtils.toastShortCenter('正在录音中...')
        }
        if (this.state.stop)
        {
            this.prepareRecordingPath(this.state.audioPath)
        }
        this.setState({recording: true, pause: false})
        try
        {
            await AudioRecorder.startRecording()
        }
        catch (err)
        {
            console.log(err)
        }
    }

    stopVoiceRecodeInput = async () =>
    {
        this.setState({voiceInputModal: false, stop: true, recording: false, paused: false, currentTime: '0'});
        if (this.state.currentTime == 0)
        {
            ToastUtils.toastShortCenter('请先录音');
            return;
        }
        try
        {
            const filePath = await AudioRecorder.stopRecording();
            var that = this;
            HttpUtils.uploadAudio(Constant.uploadReportAudio, 'file://' + filePath, function (resultcode, data)
            {
                console.log('data:' + data);
                ToastUtils.toastShortBottom('上传录音成功');
                that.setState({
                    voiceUrl: data.link.toString(),
                    voiceName: '已录音'
                })
            }, function (resultcode, reason)
            {
                ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
            });
        }
        catch (error)
        {
            console.error(error);
        }
    }

    showLongPressDelPicModal(item, type)
    {
        this.setState({
            longPressDelPicType: type,
            longPressDelPicItem: item,
            longPressDelPicModal: true
        })
    }

    longPressDelProcess()
    {
        if (this.state.longPressDelPicType == 'process')
        {
            var index = this.state.processPics.indexOf(this.state.longPressDelPicItem);
            if (index > -1)
            {
                this.state.processPics.splice(index, 1);
            }
            this.setState({
                processPics: this.state.processPics,
                longPressDelPicModal: false
            })
        }
    }

    longPressDelPic()
    {
        if (this.state.longPressDelPicType == 'pics')
        {
            var index = this.state.uploadPics.indexOf(this.state.longPressDelPicItem);
            if (index > -1)
            {
                this.state.uploadPics.splice(index, 1);
            }
            this.setState({
                uploadPics: this.state.uploadPics,
                longPressDelPicModal: false
            })
        }
    }

    showLongPressDelVoiceModal()
    {
        this.setState({
            longPressDelVoiceModal: true
        })
    }

    longPressDelVoice()
    {
        this.setState({
            longPressDelVoiceModal: false,
            voiceName: '请录音(非必填)',
            voiceUrl: '',
        })
    }

    toStringPicsUrl()
    {
        var pics = '';
        for (var i = 0; i < this.state.uploadPics.length; i++)
        {
            pics = pics + this.state.uploadPics[i].url + ',';
        }
        pics = pics.substr(0, pics.lastIndexOf(','))
        return pics;
    }

    toStringProcessUrl()
    {
        var pics = '';
        for (var i = 0; i < this.state.processPics.length; i++)
        {
            pics = pics + this.state.processPics[i].url + ',';
        }
        pics = pics.substr(0, pics.lastIndexOf(','))
        return pics;
    }

    casePublishClick()
    {
        try
        {
            RuleUtils.checkUnSelect(this.state.gradeName, '请选择案件级别');
            RuleUtils.checkUnSelect(this.state.categoryName, '请选择案件类型');
            RuleUtils.checkUnSelect(this.state.bigTypeName, '请选择案件大类');
            RuleUtils.checkUnSelect(this.state.smallTypeName, '请选择案件小类');
            RuleUtils.checkUnSelect(this.state.areaName, '请选择区域位置');
            RuleUtils.checkUnSelect(this.state.geoAddress, '请选择案件位置');
            RuleUtils.checkEmpty(this.state.questionDesc, '请输入案件描述')
            var that = this;
            var data = {
                "problem": "5",
                "source": "51",
                "grade": this.state.gradeCode,
                "category": this.state.categoryCode,
                "categoryOne": this.state.bigTypeCode,
                "categoryTwo": this.state.smallTypeCode,
                "areaCategory": this.state.areaCode,
                "geo": this.state.geoLocation,
                "geoDescript": this.state.geoAddress,
                "picReport": this.toStringPicsUrl(),
                "picProcess": this.toStringProcessUrl(),
                "audioReport": this.state.voiceUrl,
                "descript": this.state.questionDesc,
                "collaborators": this.state.gtzfIds,
                "partNo": "3100000001",
                "grid": this.state.grid
            };
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.postJsonWithRaw(Constant.kssbReport, session, JSON.stringify(data), function (resultcode, data)
                    {
                        ToastUtils.toastShortBottom('快速处置成功')
                        that.setState({
                            areaName: '请选择',
                            areaCode: '',
                            gradeName: '请选择',
                            gradeCode: '',
                            categoryName: '请选择',
                            categoryCode: '',
                            bigTypeName: '请选择',
                            bigTypeCode: '',
                            smallTypeName: '请选择',
                            smallTypeCode: '',
                            geoAddress: '请选择',
                            voiceName: '请录音(非必填)',
                            collaborators: '请选择',
                            questionDesc: '',
                            uploadPics: [],
                            processPics: []
                        })
                        that.getNeedList();//获取未上报列表
                        that.getHistoryList();//获取未上报列表
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    renderProcessPics()
    {
        let allData = [];
        for (let i = 0; i < this.state.processPics.length; i++)
        {
            let item = this.state.processPics[i];
            allData.push(
                <TouchableWithoutFeedback key={item.url} onLongPress={() =>
                {
                    this.showLongPressDelPicModal(item, 'process')
                }}>
                    <Image style={{width: 80, height: 80, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}} source={{uri: item.url}}/>
                </TouchableWithoutFeedback>
            );
        }
        allData.push(
            <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpProcess()} key={-1} style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderStyle: 'dashed', borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, width: 80, height: 80}}>
                <Image style={{width: 16, height: 16}} source={require('../img/img_add.png')}/>
            </TouchableOpacity>
        );
        return allData;
    }

    renderUploadPics()
    {
        let allData = [];
        for (let i = 0; i < this.state.uploadPics.length; i++)
        {
            let item = this.state.uploadPics[i];
            allData.push(
                <TouchableWithoutFeedback key={item.url} onLongPress={() =>
                {
                    this.showLongPressDelPicModal(item, 'pics')
                }}>
                    <Image style={{width: 80, height: 80, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}} source={{uri: item.url}}/>
                </TouchableWithoutFeedback>
            );
        }
        allData.push(
            <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPhoto()} key={-1} style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderStyle: 'dashed', borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, width: 80, height: 80}}>
                <Image style={{width: 16, height: 16}} source={require('../img/img_add.png')}/>
            </TouchableOpacity>
        );
        return allData;
    }

    renderVoiceRecord()
    {
        if (this.state.voiceName == '已录音')
        {
            return (
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpVoicePlay(this.state.voiceUrl)} onLongPress={() => this.showLongPressDelVoiceModal()} style={{marginLeft: 8, marginRight: 12, width: 100, paddingLeft: 8, paddingRight: 8, paddingTop: 4, paddingBottom: 4, borderRadius: 4, backgroundColor: '#E9EDF0', flexDirection: 'row', alignItems: 'center'}}>
                    <Image resizeMode={Image.resizeMode.stretch} style={{width: 16, height: 15}} source={require('../img/voice_record.png')}/>
                    <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_12, color: ColorUtils.black}}>录音</Text>
                </TouchableOpacity>
            )
        } else
        {
            return (
                <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.voiceName}</Text>
            )
        }
    }

    rendeCaseReport()
    {
        return (
            <View style={{justifyContent: 'center', alignItems: 'center', paddingLeft: 16, paddingRight: 16}}>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.showCaseGradeItem()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件级别</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.gradeName}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.showCategoryItem()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件类型</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.categoryName}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPageBigTypeSelect()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件大类</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.bigTypeName}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPageSmallTypeSelect()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件小类</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.smallTypeName}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPageSmallLawSelect()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>法律文书</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.lawDesc}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.showAreaGradeItem()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>区域类型</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.areaName}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpCollaboratorsSelect()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>共同执法</Text>
                    <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.collaborators}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpLocation()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件位置</Text>
                    <Text numberOfLines={2} style={{textAlign: 'right', width: 220, marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.geoAddress}</Text>
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 14, height: 18}} source={require('../img/map_location.png')}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpVoiceRecord()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件录音</Text>
                    {this.renderVoiceRecord()}
                    <View style={{width: 14, justifyContent: 'center', alignItems: 'center'}}>
                        <Image style={{width: 13, height: 18}} source={require('../img/voice_input.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{flexDirection: 'row', height: 120, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <View style={{width: 80, height: 50, flexDirection: 'row', alignItems: 'center',}}>
                        <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>处理前照片</Text>
                    </View>
                    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                        <View style={{width: ScreenUtils.width - 112, flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center',}}>
                            {this.renderUploadPics()}
                        </View>
                    </ScrollView>
                </View>
                <View style={{flexDirection: 'row', height: 120, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                    <View style={{width: 80, height: 50, flexDirection: 'row', alignItems: 'center',}}>
                        <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>处理后照片</Text>
                    </View>
                    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                        <View style={{width: ScreenUtils.width - 112, flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center',}}>
                            {this.renderProcessPics()}
                        </View>
                    </ScrollView>
                </View>
                <View style={{flexDirection: 'row', height: 150, paddingTop: 8, paddingBottom: 8}}>
                    <View style={{width: 80, height: 50, flexDirection: 'row', alignItems: 'center',}}>
                        <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>案件描述</Text>
                    </View>
                    <View style={{flex: 1, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, padding: 8}}>
                        <TextInput value={this.state.questionDesc} underlineColorAndroid='transparent'
                                   keyboardType={'default'} // 默认键盘类型
                                   autoCapitalize='none' // 取消首字母大写
                                   placeholder='请输入案件描述'
                                   placeholderTextColor={ColorUtils.gray}
                                   multiline={true}
                                   onChangeText={(text) => this.setState({questionDesc: text})}
                                   style={{fontSize: ScreenUtils.Font_12, color: ColorUtils.black, width: "100%", height: "100%", textAlignVertical: 'top'}}/>
                    </View>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center', marginLeft: 16, marginRight: 16, marginTop: 16, marginBottom: 100}}>
                    {/*<TouchableOpacity activeOpacity={0.8} onPress={() => this.caseCacheClick()} style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'red', height: 44, borderRadius: 6, backgroundColor: ColorUtils.white, borderColor: ColorUtils.line, borderWidth: 1,}}>*/}
                    {/*<Text style={{color: ColorUtils.blue, fontSize: ScreenUtils.Font_14}}>*/}
                    {/*保存*/}
                    {/*</Text>*/}
                    {/*</TouchableOpacity>*/}
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.casePublishClick()} style={{marginLeft: 16, flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderRadius: 6, backgroundColor: ColorUtils.blue}}>
                        <Text style={{color: ColorUtils.white, fontSize: ScreenUtils.Font_14}}>
                            上报
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    onLoadMoreNeed()
    {
        console.log('pull load Log..')
        if (!this.state.onLoadMoreNeed) return null;
        this.state.pageIndexNeed = this.state.pageIndexNeed + 1;
        this.getNeedList();
    }

    renderFooterHistory()
    {
        if (this.state.isNoDataHistory)
        {
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Image resizeMode={Image.resizeMode.stretch} style={{marginTop: 80, width: 152, height: 120}} source={require('../img/list_nodata.png')}/>
                    <Text style={{fontSize: ScreenUtils.Font_14, color: '#7EA0BF', fontWeight: 'bold', marginTop: 8}}>暂无数据</Text>
                </View>
            );
        }
        if (this.state.loadMoreCountHistory < 20)
        {
            this.state.onLoadMoreHistory = false;
            return null;
        } else
        {
            return (
                <View style={{paddingBottom: 2, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <ActivityIndicator style={{width: 25, height: 25,}} color='#2C98F2'/>
                    <Text style={{marginLeft: 4, fontSize: ScreenUtils.Font_10}}>执行中...</Text>
                </View>
            );
        }
    }

    onRefreshHistory()
    {
        console.log('pull refresh History..')
        this.state.pageIndexHistory = 1;
        this.getHistoryList();
    }

    onLoadMoreHistory()
    {
        console.log('pull load History..')
        if (!this.state.onLoadMoreHistory) return null;
        this.state.pageIndexHistory = this.state.pageIndexHistory + 1;
        this.getHistoryList();
    }

    renderHistoryItemView({item})
    {
        return (
            <TouchableOpacity key={item.id} activeOpacity={0.8} onPress={() => this.jumpDetail('已上报', item.id, item.processInstanceId)} style={{paddingTop: 16, paddingLeft: 16, paddingRight: 16}}>
                <View style={{flexDirection: 'row'}}>
                    <View style={{height: '100%', backgroundColor: ColorUtils.blue, width: 3}}/>
                    <View style={{marginLeft: 4, flex: 1, flexDirection: 'column', justifyContent: 'center', marginLeft: 8}}>
                        <View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件编号:</Text>
                            <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.caseNo == "" ? '无' : item.caseNo}</Text>
                        </View>
                        <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件类型:</Text>
                            <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.categoryName}</Text>
                        </View>
                        <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件大类:</Text>
                            <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.categoryOneName}</Text>
                        </View>
                        <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>案件小类:</Text>
                            <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.categoryTwoName}</Text>
                        </View>
                    </View>
                    <View style={{height: 26, justifyContent: 'center', padding: 6, borderRadius: 4, backgroundColor: '#D6EAFF'}}>
                        <Text style={{color: '#3197FF', fontSize: ScreenUtils.Font_10}}>
                            已上报
                        </Text>
                    </View>
                </View>
                <View style={{marginTop: 16, height: 1, borderColor: ColorUtils.line, borderBottomWidth: 1}}/>
            </TouchableOpacity>
        );
    }

    render()
    {
        return (
            <View style={styles.container}>
                <ScrollableTabView
                    locked={true}
                    renderTabBar={() => <DefaultTabBar style={{flexDirection: 'row', borderBottomWidth: 0, paddingBottom: 3, height: 45}}/>}
                    onChangeTab={this.onChangeTabs.bind(this)}
                    tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
                    tabBarTextStyle={styles.tabBarTextStyle}
                    tabBarBackgroundColor={ColorUtils.white}
                    tabBarInactiveTextColor={ColorUtils.black}
                    tabBarActiveTextColor={ColorUtils.blue}>
                    <ScrollView tabLabel='新增上报'>
                        {this.rendeCaseReport()}
                    </ScrollView>
                    <AnimatedFlatList
                        tabLabel='已上报'
                        data={this.state.dataSourceHistory}
                        keyExtractor={item => item.id}
                        renderItem={this.renderHistoryItemView.bind(this)}
                        ListFooterComponent={this.renderFooterHistory.bind(this)}
                        refreshing={this.state.onRefreshingHistory}
                        onRefresh={this.onRefreshHistory.bind(this)}
                        onEndReached={this.onLoadMoreHistory.bind(this)}
                        onEndReachedThreshold={1}
                    />
                </ScrollableTabView>
                <SimpleItemsBottom
                    items={this.state.caseGradeDatas}
                    itemKey='dictValue'
                    ref={ref => this.CaseGradeItemsDialog = ref}
                    onPress={(pos) =>
                    {
                        //案件级别
                        this.setState({
                            gradeName: this.state.caseGradeDatas[pos].dictValue,
                            gradeCode: this.state.caseGradeDatas[pos].dictKey
                        })
                    }}/>
                <SimpleItemsBottom
                    items={this.state.areaGradeDatas}
                    itemKey='dictValue'
                    ref={ref => this.AreaGradeItemsDialog = ref}
                    onPress={(pos) =>
                    {
                        //区域类型
                        this.setState({
                            areaName: this.state.areaGradeDatas[pos].dictValue,
                            areaCode: this.state.areaGradeDatas[pos].dictKey
                        })
                    }}/>
                <SimpleItemsBottom
                    items={this.state.caseCategoryDatas}
                    itemKey='categoryName'
                    ref={ref => this.CaseCategoryItemsDialog = ref}
                    onPress={(pos) =>
                    {
                        //案件类型
                        if (this.state.caseCategoryDatas[pos].categoryName != this.state.categoryName)
                        {
                            this.setState({
                                categoryName: this.state.caseCategoryDatas[pos].categoryName,
                                categoryCode: this.state.caseCategoryDatas[pos].categoryCode,
                                bigTypeName: '请选择',
                                smallTypeName: '请选择',
                                bigTypeCode: '',
                                smallTypeCode: '',
                            })
                        }
                    }}/>
                <Modal style={styles.container}
                       transparent={true}
                       animationType="slide"
                       visible={this.state.voiceInputModal}
                       onRequestClose={() =>
                       {
                           this.setState({voiceInputModal: false});
                       }}>
                    <TouchableWithoutFeedback style={{flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)',}} onPress={() =>
                    {
                        // this.setState({voiceInputModal: false})
                    }}>
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)'}}>
                            <View style={{borderWidth: 1, borderColor: '#D5D5D5', borderRadius: 10, alignItems: 'center', backgroundColor: '#fff', width: 270, height: 200}}>
                                <View style={{backgroundColor: '#F4F4F4', width: 270, height: 40, borderRadius: 10, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
                                    <Text style={{fontSize: 16, color: '#333333', marginLeft: 25, marginRight: 25}}>提示</Text>
                                </View>
                                <View style={{width: 270, height: 100, justifyContent: 'center', alignItems: 'center', padding: 16}}>
                                    <Image resizeMode={Image.resizeMode.stretch} style={{width: 50, height: 50}} source={require('../img/voice_record_input.png')}/>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black, marginTop: 12}}>录音时长: {this.state.currentTime}s</Text>
                                </View>
                                <View style={{flex: 1, width: 270, height: 50, flexDirection: 'row', borderTopWidth: 1, position: "absolute", bottom: 0, borderTopColor: '#cccccc', alignItems: 'center'}}>
                                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderRightColor: '#cccccc'}} onPress={() =>
                                    {
                                        this.stopVoiceRecodeInput();
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.blue}}>停止录音</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderLeftColor: '#cccccc', borderLeftWidth: 1}} onPress={() =>
                                    {
                                        this.startVoiceRecodeInput();
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.blue}}>开始录音</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </Modal>
                <Modal style={styles.container}
                       transparent={true}
                       visible={this.state.longPressDelPicModal}
                       onRequestClose={() =>
                       {
                           this.setState({longPressDelPicModal: false});
                       }}>
                    <TouchableWithoutFeedback style={{flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)',}} onPress={() =>
                    {
                        this.setState({longPressDelPicModal: false})
                    }}>
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.6)'}}>
                            <View style={{borderRadius: 10, alignItems: 'center', backgroundColor: '#fff', width: 270, height: 200}}>
                                <View style={{backgroundColor: '#F4F4F4', width: 270, height: 40, borderRadius: 10, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
                                    <Text style={{fontSize: 16, color: '#333333', marginLeft: 25, marginRight: 25}}>提示</Text>
                                </View>
                                <View style={{width: 270, height: 100, justifyContent: 'center', alignItems: 'center', padding: 16}}>
                                    <Image resizeMode={Image.resizeMode.stretch} style={{width: 50, height: 50}} source={require('../img/del_icon_tip.png')}/>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black, marginTop: 12}}>确定删除照片吗？</Text>
                                </View>
                                <View style={{flex: 1, width: 270, height: 50, flexDirection: 'row', borderTopWidth: 1, position: "absolute", bottom: 0, borderTopColor: '#cccccc', alignItems: 'center'}}>
                                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderRightColor: '#cccccc'}} onPress={() =>
                                    {
                                        this.setState({longPressDelPicModal: false})
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.blue}}>取消</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderLeftColor: '#cccccc', borderLeftWidth: 1}} onPress={() =>
                                    {
                                        this.longPressDelProcess();
                                        this.longPressDelPic();
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.blue}}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </Modal>
                <Modal style={styles.container}
                       transparent={true}
                       visible={this.state.longPressDelVoiceModal}
                       onRequestClose={() =>
                       {
                           this.setState({longPressDelVoiceModal: false});
                       }}>
                    <TouchableWithoutFeedback style={{flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)',}} onPress={() =>
                    {
                        this.setState({longPressDelVoiceModal: false})
                    }}>
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.6)'}}>
                            <View style={{borderRadius: 10, alignItems: 'center', backgroundColor: '#fff', width: 270, height: 200}}>
                                <View style={{backgroundColor: '#F4F4F4', width: 270, height: 40, borderRadius: 10, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
                                    <Text style={{fontSize: 16, color: '#333333', marginLeft: 25, marginRight: 25}}>提示</Text>
                                </View>
                                <View style={{width: 270, height: 100, justifyContent: 'center', alignItems: 'center', padding: 16}}>
                                    <Image resizeMode={Image.resizeMode.stretch} style={{width: 50, height: 50}} source={require('../img/del_icon_tip.png')}/>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black, marginTop: 12}}>确定删除录音吗？</Text>
                                </View>
                                <View style={{flex: 1, width: 270, height: 50, flexDirection: 'row', borderTopWidth: 1, position: "absolute", bottom: 0, borderTopColor: '#cccccc', alignItems: 'center'}}>
                                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderRightColor: '#cccccc'}} onPress={() =>
                                    {
                                        this.setState({longPressDelVoiceModal: false})
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.blue}}>取消</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center', height: 44, borderLeftColor: '#cccccc', borderLeftWidth: 1}} onPress={() =>
                                    {
                                        this.longPressDelVoice();
                                    }}>
                                        <Text style={{marginTop: 5, textAlign: 'center', fontSize: 16, marginBottom: 10, color: ColorUtils.blue}}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
    tabBarUnderlineStyle: {
        height: 2,
        minWidth: Math.floor(ScreenUtils.width * 0.8 / 8),
        backgroundColor: ColorUtils.blue,
    },
    tabBarTextStyle: {
        fontSize: ScreenUtils.Font_14,
        fontWeight: 'normal'
    }
});


